<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>

<div id="comments" class="comments-area">
    <?php $this->comments()->to($comments); ?>

    <?php if ($comments->have()): ?>
        <h3 class="comments-title">
            <i class="fas fa-comments"></i> 
            <?php $this->commentsNum(_t('暂无评论'), _t('1 条评论'), _t('%d 条评论')); ?>
        </h3>
        
        <div class="comment-list">
            <?php
            // 自定义评论列表回调函数
            function threadedComments($comments, $options) {
                $commentClass = '';
                if ($comments->authorId) {
                    if ($comments->authorId == $comments->ownerId) {
                        $commentClass .= ' comment-by-author';
                    }
                }
                $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent';
            ?>
            
            <li id="<?php $comments->theId(); ?>" class="comment-item<?php echo $commentClass . $commentLevelClass; ?>">
                <div class="comment-body">
                    <div class="comment-author">
                        <?php $comments->gravatar('40', ''); ?>
                        <div class="comment-author-info">
                            <cite class="fn">
                                <?php $comments->author(); ?>
                                <?php if ($comments->authorId == $comments->ownerId): ?>
                                    <span class="author-tag">作者</span>
                                <?php endif; ?>
                            </cite>
                            <div class="comment-meta">
                                <time datetime="<?php $comments->date('c'); ?>">
                                    <i class="fas fa-clock"></i>
                                    <?php $comments->date('Y-m-d H:i'); ?>
                                </time>
                                <?php if ($comments->status == 'waiting'): ?>
                                    <em class="comment-awaiting">
                                        <i class="fas fa-hourglass-half"></i>
                                        <?php _e('评论等待审核'); ?>
                                    </em>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    
                    <div class="comment-content">
                        <?php $comments->content(); ?>
                    </div>
                    
                    <div class="comment-reply">
                        <?php $comments->reply('<i class="fas fa-reply"></i> 回复'); ?>
                    </div>
                </div>
                
                <?php if ($comments->children) { ?>
                    <div class="comment-children">
                        <?php $comments->threadedComments($options); ?>
                    </div>
                <?php } ?>
            </li>
            <?php } ?>

            <?php $comments->listComments(); // 去掉了数组参数，使用默认的列表结构 ?>
        </div>

        <div class="comment-navigator">
            <?php $comments->pageNav(
                '<i class="fas fa-angle-left"></i>',
                '<i class="fas fa-angle-right"></i>',
                1,
                '...',
                array(
                    'wrapTag'      => 'ul',
                    'wrapClass'    => 'pagination',
                    'itemTag'      => 'li',
                    'textTag'      => 'span',
                    'currentClass' => 'active',
                    'prevClass'    => 'prev',
                    'nextClass'    => 'next'
                )
            ); ?>
        </div>
    <?php else: ?>
        <div class="no-comments">
            <i class="fas fa-comments"></i>
            <p><?php _e('暂无评论，快来抢沙发吧！'); ?></p>
        </div>
    <?php endif; ?>

    <?php if($this->allow('comment')): ?>
        <div id="<?php $this->respondId(); ?>" class="respond">
            <div class="cancel-comment-reply">
                <?php $comments->cancelReply(
                    '<i class="fas fa-times-circle"></i>取消回复'
                ); ?>
            </div>
            
            <h3 class="respond-title">
                <i class="fas fa-comment"></i> 
                <?php _e('发表评论'); ?>
            </h3>
            
            <form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
                <?php if($this->user->hasLogin()): ?>
                    <p class="logged-in-as">
                        <i class="fas fa-user"></i> 
                        <?php _e('已登录为: '); ?>
                        <a href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a>
                        <a href="<?php $this->options->logoutUrl(); ?>" title="退出"><?php _e('退出'); ?> &raquo;</a>
                    </p>
                <?php else: ?>
                    <div class="comment-form-fields">
                        <p>
                            <label for="author"><?php _e('称呼'); ?> <?php if ($this->options->commentsRequireMail): ?><span class="required">*</span><?php endif; ?></label>
                            <input type="text" name="author" id="author" class="text" placeholder="您的称呼" value="<?php $this->remember('author'); ?>" required />
                        </p>
                        <p>
                            <label for="mail"><?php _e('邮箱'); ?> <?php if ($this->options->commentsRequireMail): ?><span class="required">*</span><?php endif; ?></label>
                            <input type="email" name="mail" id="mail" class="text" placeholder="example@domain.com" value="<?php $this->remember('mail'); ?>" <?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?> />
                        </p>
                        <p>
                            <label for="url"><?php _e('网站'); ?> <?php if ($this->options->commentsRequireURL): ?><span class="required">*</span><?php endif; ?></label>
                            <input type="url" name="url" id="url" class="text" placeholder="<?php _e('http://'); ?>" value="<?php $this->remember('url'); ?>" <?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?> />
                        </p>
                    </div>
                <?php endif; ?>
                
                <p class="comment-form-textarea">
                    <label for="textarea"><?php _e('评论内容'); ?> <span class="required">*</span></label>
                    <textarea rows="8" cols="50" name="text" id="textarea" class="textarea" placeholder="写下您的想法..." required ><?php $this->remember('text'); ?></textarea>
                </p>
                
                <p class="comment-form-submit">
                    <button type="submit" class="submit">
                        <i class="fas fa-paper-plane"></i> <?php _e('发表评论'); ?>
                    </button>
                </p>
            </form>
        </div>
    <?php endif; ?>
</div>

<script>
// 评论表单验证和提交动画
document.getElementById('comment-form')?.addEventListener('submit', function(e) {
    const submitBtn = this.querySelector('button[type="submit"]');
    submitBtn.innerHTML = '<i class="fas fa-spinnerfa-spin"></i> 提交中...';
    submitBtn.disabled = true;
});

// 评论区域平滑滚动
document.querySelectorAll('.comment-reply a').forEach(link => {
    link.addEventListener('click', function(e) {
        const respondBox = document.getElementById('respond');
        if (respondBox) {
            respondBox.classList.add('respond-active');
            setTimeout(() => {
                respondBox.scrollIntoView({ behavior: 'smooth' });
            }, 100);
        }
    });
});

// 取消回复时移除样式
document.querySelector('.cancel-comment-reply a')?.addEventListener('click', function(e) {
    const respondBox = document.getElementById('respond');
    if (respondBox) {
        respondBox.classList.remove('respond-active');
    }
});
</script>
